<template>
	<view class="container">
		<uni-segmented-control class="uni_segmented_control" style="margin-top: -20rpx; background: #fff" :current="current"
			:values="items" style-type="text" active-color="#007aff" @clickItem="onClickItem" />

		<view class="pb20"></view>

		<!-- 未读 -->
		<view class="notiy">
			<uni-card spacing="0" is-full :border="false" v-for="(item, index) in list" :key="index">
				<template v-slot:title>
					<view class="slot-box">
						<!-- {{item.type}} -->
						<image :src="obj[item.type].icon" />
						<text class="title">{{ obj[item.type].text }} </text>
						<text class="extra">{{ item.createTime }}</text>
					</view>
				</template>
				<view class="comment_people" v-if="item.type == 10">
					{{ item.content[0] }}
				</view>
				<view class="comment_content overflow-2-lines" v-if="item.type == 10">
					{{ item.content[1] }}
				</view>
				<text class="content" v-if="item.type == 10">
					{{ item.content[2] }}
				</text>
				<text class="content" v-else>{{ item.content }}</text>
				<view class="yidu" v-show='item.status == 0'>
					<image src="../../static/notice/xiangmu/10.png" mode="" />
					<text @click="isReadFn(item.projectNoticeId)">标为已读</text>
				</view>
			</uni-card>
		</view>

		<view class="no-data" v-if="list.length === 0">
			<NoData style="height: 100%;" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		apiProjectNoticeList,
		apiChangeNoticeStauts
	} from "../../net/xiangmu";
	import NoData from "@/components/NoData.vue";

	const current = ref(0);
	const items = ref(["未读消息", "已读消息"]);
	const list = ref([]);
	const userUid = uni.getStorageSync("userInfo").uid;
	const obj = reactive([{
			index: 0,
			text: "项目管理通知",
			icon: "../../static/notice/xiangmu/1.png"
		},
		{
			index: 1,
			text: "自立项目申报开始",
			icon: "../../static/notice/xiangmu/1.png"
		},
		{
			index: 2,
			text: "申报立项进程",
			icon: "../../static/notice/xiangmu/2.png"
		},
		{
			index: 3,
			text: "申报审核",
			icon: "../../static/notice/xiangmu/3.png"
		}, {
			index: 4,
			text: "项目进度审核",
			icon: "../../static/notice/xiangmu/4.png"
		},
		{
			index: 5,
			text: "项目进度管理",
			icon: "../../static/notice/xiangmu/5.png"
		},
		{
			index: 6,
			text: "经费报销",
			icon: "../../static/notice/xiangmu/7.png"
		},
		{
			index: 7,
			text: "经费报销审核",
			icon: "../../static/notice/xiangmu/6.png"
		}, {
			index: 8,
			text: "项目变更管理",
			icon: "../../static/notice/xiangmu/9.png"
		},
		{
			index: 9,
			text: "项目变更审核",
			icon: "../../static/notice/xiangmu/8.png"
		},
		{
			index: 10,
			text: "论坛评论通知",
			icon: "../../static/notice/xiangmu/1.png"
		}
	]);

	const params = reactive({
		status: 0,
		pageNum: 1,
		pageSize: 10,
	});
	const total = ref(0);
	const getList = async () => {
		const queryType = -1;
		const isRead = current.value === 0 ? 0 : 2;
		params.status = isRead;
		apiProjectNoticeList(params)
			.then((res) => {
				if (res.code == 0) {
					list.value = list.value.concat(res.data);
					total.value = res.total;
					if (list.value.length > 0) {
						let biao = "##";
						for (let i = 0; i < list.value.length; i++) {
							if (list.value[i].content.split('##').length - 1 == 2) {
								list.value[i].content = list.value[i].content.split('##');
							}
						}
					} else {
						list.value = [];
						total.value = 0;
					}
				} else {
					list.value = [];
					total.value = 0;
				}
			})
			.catch((err) => {
				console.log(err);
				list.value = [];
				total.value = 0;
			});
		uni.stopPullDownRefresh();
	};

	onShow(() => {
		getList();
	});

	// 标记已读
	const isReadFn = (id) => {
		list.value = [];
		total.value = 0;
		params.status = 0;
		
		apiChangeNoticeStauts(id)
			.then((res) => {
				if (res.code == 0) {
					getList();
				}
			})
			.catch();
	};

	const onClickItem = (e) => {
		list.value = [];
		total.value = 0;
		params.status = 0;
		params.pageNum = 1;
		params.pageSize = 10;
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
			getList();
		}
	};

	// 下拉刷新，获取最新的数据
	onPullDownRefresh(() => {
		list.value = [];
		total.value = 0;
		params.status = 0;
		params.pageNum = 1;
		params.pageSize = 10;

		getList();
	});

	// 上拉加载
	onReachBottom(() => {
		console.log(params);
		if (params.pageNum * params.pageSize >= total.value) {
			uni.showToast({
				title: '数据全部加载',
				duration: 2000
			});
			return;
		} else {
			params.pageNum++;
			getList();
		}
	});
</script>

<style lang="scss">
	@import "/static/common.scss";

	image {
		width: 48rpx;
		height: 48rpx;
	}

	.overflow-2-lines {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* 指定最大显示行数 */
		-webkit-line-clamp: 2;
		/* 省略号 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 防止单词被截断 */
		word-break: break-all;
		white-space: normal;
	}


	.container {
		padding-top: 10px;
		background: #f9f9f9;
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;

		.uni_segmented_control {
			width: 100%;
			position: fixed;
			top: 10rpx;
			z-index: 100;
		}
	}

	.pb20 {
		padding-bottom: 20px;
	}

	.uni-card {
		width: 100% !important;
		border-radius: 4px;

		&:not(:last-child) {
			margin-bottom: 30rpx !important;
		}
	}

	.slot-box {
		padding: 7px 10px;

		.title {
			flex: 1;
			margin-left: 10rpx;
			font-size: 30rpx;
			font-weight: bold;
		}

		.extra {
			font-size: 26rpx;
			color: #999;
		}
	}

	.notiy {
		margin-top: 40rpx;
		width: 750rpx;
		padding: 0 25rpx;
		box-sizing: border-box;

		.uni-card {
			width: 700rpx;
			min-height: 300rpx;
			margin: 0 auto;
			background: #ffffff;
			border-radius: 20rpx;
		}

		// 评论人
		.comment_people {
			height: 34rpx;
			font-size: 24rpx;
			line-height: 28rpx;
			color: #666666;
		}

		// 评论内容
		.comment_content {
			width: 614prx;
			margin: 10rpx 0;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}

		.content {
			display: inline-block;
			width: 654rpx;
			min-height: 100rpx;
			font-size: 30rpx;
			color: #666666;
			padding: 10rpx;
			box-sizing: border-box;
			background: #f8fafb;
			border-radius: 8rpx;
		}

		.yidu {
			margin: 16rpx 0;
			width: 100%;
			height: 50rpx;
			color: #3b95ff;
			display: flex;
			align-items: center;
			justify-content: right;
		}
	}
	.no-data{
		position: absolute;
		left: 0;
		top: 140rpx;
		right: 0;
		bottom: 0;
		height: 100%;
	}
</style>